<html>
<header>
{% load static %}

<meta charset="utf-8">
<script src="{%  static 'echarts.min.js' %}"></script>
</header>
<body>
<form id="polt_info">
  <label for="account_name">Exchange:</label>
  <select id="account_name" name="account_name"></select>
  <label for="channel_name">Product:</label>
  <select id="channel_name" name="channel_name"></select>
</form>
<button id="btn_submit" value="Plot">Plot</button>
<br/>
{% comment %} <div id="container" style="width: 75%;">
    <canvas id="data-chart" data-url="{% url 'data-chart' %}"></canvas>
</div> {% endcomment %}
<div id="main" style="width:80%; height:75%;"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
    Date.prototype.yyyymmddHHMMss = function() {  
      var mm = this.getMonth() + 1; // getMonth() is zero-based
      var dd = this.getDate();
      var HH = this.getHours();
      var MM = this.getMinutes();
      var ss = this.getSeconds();

      return [this.getFullYear(),
              (mm>9 ? '' : '0') + mm,
              (dd>9 ? '' : '0') + dd
            ].join('/') + "\n" + [HH, (MM>9 ? '' : '0') + MM, (ss>9 ? '' : '0') + ss].join(':');
    };

    $(function () {
      var resp_data = {};
      var func_update_select_channel_name = function() {
        $( "#account_name option:selected" ).each(function() {
          $("#channel_name").empty();
          $.each(resp_data[$(this).text()], function(index, value){
            var o = new Option(value, value);
            $("#channel_name").append(o);
          })
        });
      };

      $.get('/feedplot/get_data_struct', function (data) {
        resp_data = data;
        $("#account_name").empty();
        $.each(resp_data, function(index, jsonObj){
          var o = new Option(index, index);
          $(o).html(index);
          $("#account_name").append(o);
        });
        func_update_select_channel_name();
      });

      $("#account_name").change(func_update_select_channel_name);

      

      $("button#btn_submit").click(function(){
        $.ajax({
                url: '/feedplot/data-chart',
                type: 'post',
                dataType: 'json',
                data: $('form#polt_info').serialize(),
                success: function(data) {

                // based on prepared DOM, initialize echarts instance
                var x_data = [];
                var myChart = echarts.init(document.getElementById('main'));
                for (i = 0; i < data.labels.length; i++) {
                  var d = new Date(data.labels[i]);
                  x_data.push(d.yyyymmddHHMMss());
                }
                console.log(data.labels)      
                console.log(x_data)
                console.log(data.data)                

                // specify chart configuration item and data
                var option = {
                    title: {
                        text: $('form#polt_info > #account_name option:selected').text()+"的"+$('form#polt_info > #channel_name option:selected').text()+"数据"
                    },
                    tooltip: {},
                    legend: {
                        data:['Sales']
                    },
                    xAxis: {
                        type: "category",
                        data: x_data
                    },
                    yAxis: {
                      type: 'value',
                      scale: true
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 80,
                        end: 100
                    }, {
                        start: 80,
                        end: 100
                    }],
                    series: [{
                        name: 'price',
                        type: 'line',
                        data: data.data
                    }]
                };

                // use configuration item and data specified to show chart
                myChart.setOption(option);
              }
            });
        });
      });
  </script>
</body>
</html>